<template>
  <div class="goodsAdd-basic">
    <el-dialog title="新增商品" :visible="value" width="630px" @close="close">
      <el-form ref="ruleForm" :model="form" style="width: 100%;margin: 0 auto;">
        <el-form-item label="商品名称:" :label-width="formLabelWidth" prop="skuName">
          <el-input v-model="form.skuName" autocomplete="off" maxlength="15" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="品牌:" :label-width="formLabelWidth" prop="name1">
          <el-input v-model="form.brandName" autocomplete="off" maxlength="15" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="商品价格(元):" prop="price" class="goodsAdd-input-num">
          <el-input-number v-model="form.price" controls-position="right" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="商品类型:" :label-width="formLabelWidth" prop="brandName">
          <el-select v-model="form.classId" placeholder="请选择">
            <el-option v-for="item in goodsList" :key="item.classId" :label="item.className" :value="item.classId" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格:" :label-width="formLabelWidth" prop="unit">
          <el-input v-model="form.unit" autocomplete="off" maxlength="15" placeholder="请输入" />
        </el-form-item>
        <!-- 上传 -->
        <el-form-item label="商品图片:" :label-width="formLabelWidth" prop="skuImage">
          <el-upload
            :on-success="handleUploadSuccess"
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-plus" style="text-aling:center" />
            <div slot="tip" class="el-upload__tip">支持扩展名：jpg、png，文件不得大于100kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="background-color: #fbf4f0;border: 0px;" @click="close">取 消</el-button>
        <el-button type="primary" style="background-color: #ff6b28;border: 0px;" @click="addGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { goodsClassApi } from '../../../api/goodsclass'
import { goodsAddApi, goodsUpdateApi } from '../../../api/goodsmanage'
export default {
  name: 'GoodsAdd',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        skuName: '',
        price: null,
        classId: null,
        unit: '',
        skuImage: 'https://likede2-java.itheima.net/image/product6.png',
        brandName: ''

      },
      formLabelWidth: '100px',
      goodsList: []
    }
  },
  created() {
    this.goodsClassApi()
    if (this.row) {
      console.log(11111)
      this.form = this.row
    }
  },
  methods: {
    close() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 只对有校验的表单才会清空
      // this.$refs.fromRef.resetFields()
      // 将数据初始化,表单就会清空
      this.form = this.$options.data().form
      this.$emit('update:row', {})
      // 需要清空一下这个id,不然在进行添加这个id会一直存在就一直编辑
      // this.$emit('update:edit-id', null)
    },
    // 上传成功的回调
    handleUploadSuccess(response, file, fileList) {
    // 在上传成功的回调函数中获取到上传成功的图片地址
    //   const imageUrl = response.data.url // 假设后端返回的数据中包含图片地址字段为url
    // 将图片地址存储在变量中
    //   this.form.skuImage = imageUrl
    // 在这里可以调用新增发送请求的函数，使用 this.form.skuImage 的值进行请求
    // exampleFunction(this.form.skuImage);
    },
    // 商品类型
    async goodsClassApi() {
      const res = await goodsClassApi()
      this.goodsList = res.data.currentPageRecords
    },
    // 添加商品弹窗 确定按钮
    async addGoods() {
      if (this.form.classId) {
        await this.goodsUpdate()
        this.$nextTick(() => {
          this.$emit('updateAcc')
        })
      } else {
        const res = await goodsAddApi(this.form)
        console.log(res)
        if (!res.status === 200) {
          this.$message('添加失败')
        }
      }
      this.close()
    },
    // 修改
    async goodsUpdate() {
      const res = await goodsUpdateApi(this.form)
      console.log(res, 'uuuuuuuuu')
    }
  }
}
</script>
<style lang='scss'  >
 .goodsAdd-basic{
  .el-dialog{
    border-radius: 10px;
    padding: 20px;
  .el-input__inner{
      width: 396px;
    }
    .el-textarea{
      width: 88%;
    }
  }
  .goodsAdd-input-num{
    .el-input-number{
      width: 396px;
    }
  }
  .upload-demo{
  .el-upload-dragger{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  }
}
</style>
